import React, {Component} from "react";
import axios from "axios";
import cookie from 'react-cookies'
import "./login.css";
import {Button, Alert } from "antd";
// import {server_addr} from "../../index";

export default class Login extends Component {
    constructor(props) {
        super(props);
        // this.handleSubmit=this.handleSubmit.bind(this)
        // this.geturl = this.geturl.bind(this);
        this.reloadPic = this.reloadPic.bind(this);
        this.state = {
            code: '',
            codeLength: 4,
            fontSizeMin: 20,
            fontSizeMax: 22,
            backgroundColorMin: 240,
            backgroundColorMax: 250,
            colorMin: 10,
            colorMax: 20,
            lineColorMin: 40,
            lineColorMax: 180,
            contentWidth: 96,
            contentHeight: 38,
            showError: false
        }
    }

    componentWillMount(){
        this.canvas = React.createRef()
    }

    componentDidMount() {
        this.randomCode()
    }

    randomNum(min, max){
        return Math.floor(Math.random() * (max - min) + min)
    }

    randomColor(min, max) {
        const r = this.randomNum(min, max)
        const g = this.randomNum(min, max)
        const b = this.randomNum(min, max)
        return `rgb(${r}, ${g}, ${b})`
    }

    drawText(ctx, txt, i) {
        ctx.fillStyle = this.randomColor(this.state.colorMin, this.state.colorMax)
        const fontSize = this.randomNum(this.state.fontSizeMin, this.state.fontSizeMax)
        ctx.font = fontSize + 'px SimHei'
        const padding = 10;
        const offset = (this.state.contentWidth - 40) / (this.state.code.length - 1)
        let x = padding;
        if (i > 0) {
            x = padding + (i * offset)
        }
        let y = this.randomNum(this.state.fontSizeMax, this.state.contentHeight - 5)
        if (fontSize > 40) {
            y = 40
        }
        const deg = this.randomNum(-10, 10)
        // 修改坐标原点和旋转角度
        ctx.translate(x, y)
        ctx.rotate(deg * Math.PI / 180);
        ctx.fillText(txt, 0, 0);
        // 恢复坐标原点和旋转角度
        ctx.rotate(-deg * Math.PI / 180);
        ctx.translate(-x, -y)
    }

    drawDot(ctx) {
        // 绘制干扰点
        for (let i = 0; i < 100; i++) {
            ctx.fillStyle = this.randomColor(0, 255)
            ctx.beginPath()
            ctx.arc(this.randomNum(0, this.state.contentWidth), this.randomNum(0, this.state.contentHeight), 1, 0, 2 * Math.PI)
            ctx.fill()
        }
    }

    reloadPic(){
        this.randomCode()
    }

    // 随机生成验证码
    randomCode() {
        let random = ''
        // 去掉了I l i o O,可自行添加
        const str = 'QWERTYUPLKJHGFDSAZXCVBNMqwertyupkjhgfdsazxcvbnm1234567890'
        for (let i = 0; i < this.state.codeLength; i++) {
            const index = Math.floor(Math.random() * 57);
            random += str[index];
        }
        this.setState({
            code: random
        }, () => {
            const canvas = this.canvas.current;
            const ctx = canvas.getContext('2d')
            ctx.textBaseline = 'bottom'
            // 绘制背景
            ctx.fillStyle = this.randomColor(this.state.backgroundColorMin, this.state.backgroundColorMax)
            ctx.fillRect(0, 0, this.state.contentWidth, this.state.contentHeight)
            // 绘制文字
            for (let i = 0; i < this.state.code.length; i++) {
                this.drawText(ctx, this.state.code[i], i)
            }
            this.drawDot(ctx)
        })
    }
    reloadPic(){
        this.randomCode()
    }

    // geturl(myUser,myPwd){
    //     axios.get(server_addr+"/login",{params:{
    //             account:myUser,
    //             password:myPwd
    //         }}).then((res)=>{
    //         if(res.data.isLogin){
    //             alert('登录成功！');
    //             cookie.save("user",this.myUser.value,{path:"#/"})
    //             cookie.save("identity",res.data.flag,{path:"#/"})
    //             window.location.href="/#/"
    //         }else{
    //             alert('抱歉，账号密码不正确！');
    //             this.reloadPic();
    //         }
    //     }).catch(function (error) {
    //         console.log(error);
    //     })
    // }

    // handleSubmit(){
    //     console.log(this.state.code)
    //     if(this.myCaptcha.value === this.state.code){
    //         if (this.myUser.value && this.myPwd.value){
    //             this.geturl(this.myUser.value,this.myPwd.value)
    //         }
    //         else{
    //             alert('密码或账户不能为空！')
    //             this.reloadPic();
    //         }
    //     }
    //     else{
    //         alert('验证码不正确！请重新输入！')
    //         this.reloadPic();
    //     }
    // }


    render(){
        document.title = "登录";
        return(
            <div className="login-container">
                <div className="login-block">
                    <p className="login-text">登录</p>
                    <Alert message="该功能正在完善，敬请期待！" type="info" showIcon style={{width:"22vw",marginLeft:"5vw"}}/>
                    <ul>
                        <li>
                            <p className="login-text1" >账号</p>
                            <input className="login-input1" placeholder="请输入邮箱" type="text" ref={input=>{this.myUser=input}}/>
                        </li>
                        <li>
                            <p className="login-text1" >密码</p>
                            <input className="login-input1" placeholder="请输入密码" type="password" ref={input=>{this.myPwd=input}}/>
                        </li>
                        <li>
                            <p className="login-text1">验证码</p>
                            <input className="login-input2" placeholder="请输入验证码" type="text" ref={input=>{this.myCaptcha=input}}/>
                            <canvas id="canvas" width="110" height="25" onClick={this.reloadPic} ref={this.canvas} />
                        </li>
                    </ul>
                    <div className="login-action">
                        <Button className="login-button" type="primary" onClick={this.handleSubmit}>立即登录</Button>
                        <div className="ex-login-btn">
                            <p className="login-p1">忘记密码？</p>
                            <a href="/#/Register"><p className="login-p2">没有账号？立即注册</p></a>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}